<template>
  <div class="orderIssued">
    <!-- <el-button type="primary" @click="" size="small">批量命令下发</el-button> -->
    <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small" label-width="100px">
      <el-form-item label="操作类型">
        <el-select v-model="formInline.type" placeholder="操作类型" @change="onChange">
          <el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <!-- <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item> -->
    </el-form>
    <!-- <el-divider content-position="left" v-if="TOfILE.indexOf(formInline.type) !=-1">文件筛选</el-divider> -->
    <el-table :data="fileTableData" v-if="TOfILE.indexOf(formInline.type) !=-1" style="width: 100%" @selection-change="fileSelectionChange" fit :max-height="maxheight" border stripe size="mini"
      highlight-current-row :header-cell-style="{background:'#e5e5e5',color:'#000'}">
      <el-table-column type="selection" width="40" fixed="left">
      </el-table-column>
      <el-table-column prop="name" label="名称" fixed="left" />
      <el-table-column prop="remark" label="说明" />
      <el-table-column prop="url" min-width="120" label="文件名称" />
      <el-table-column prop="type" label="文件类型">
        <template slot-scope="scope">
          <span v-for="(item, index) in typeOptions" :key="index" :value="item.value" v-show="scope.row.type == item.value">{{ item.label }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="version" label="版本号" />
      <el-table-column prop="filesize" label="文件大小" />
      <el-table-column prop="filesha256" label="文件SHA256" />
      <el-table-column prop="createBy" label="创建人" />
      <el-table-column prop="createTime" label="创建时间">
        <template slot-scope="scope">
          {{ scope.row.createTime | formatTime }}
        </template>
      </el-table-column>
    </el-table>
    <div style="text-align:right" v-if="TOfILE.indexOf(formInline.type) !=-1">
      <pagination style="padding:10px 16px" v-show="pagination.total>0" :limit.sync="pagination.pageSize" :page.sync="pagination.page" :total="pagination.total" @pagination="getPageList" />
    </div>
    <el-form :inline="true" :model="searchForm" size="small" label-width="100px">
      <!-- <el-form-item label="分组名称">
        <el-select v-model="searchForm.groupName" clearable placeholder="请选择分组">
          <el-option v-for="(item,index) in groupTableData" :key="index" :label="item.groupName" :value="index.groupName">
          </el-option>
        </el-select>
      </el-form-item> -->

      <el-form-item label="网关ID">
        <el-input v-model="searchForm.gatewayId" clearable placeholder="请输入网关ID" />
      </el-form-item>
      <el-form-item label="节点类型">
        <el-select v-model="searchForm.nodeType" clearable placeholder="请选择节点类型">
          <el-option label="终端设备" value="ENDPOINT"></el-option>
          <el-option label="网关设备" value="GATEWAY"></el-option>
          <el-option label="未知设备" value="UNKNOW"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="设备注册时间">
        <el-date-picker v-model="searchTime" style="width:350px" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="deviceSearch">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="deviceTableData" ref="deviceTable" style="width: 100%" @selection-change="deviceSelectionChange" fit :max-height="maxheight" border stripe size="mini" highlight-current-row
      :header-cell-style="{background:'#e5e5e5',color:'#000'}">
      <el-table-column type="selection" label="全选" width="40" fixed="left" />
      <el-table-column prop="deviceId" label="设备 ID" fixed="left" />
      <el-table-column prop="gatewayId" label="网关 ID" fixed="left" />
      <el-table-column prop="nodeType" label="节点类型">
        <template slot-scope="scope">
          <span v-if="scope.row.nodeType == 'ENDPOINT'" style="color: #0066ff">终端设备</span>
          <span v-if="scope.row.nodeType == 'GATEWAY'" style="color: #0066ff">网关设备</span>
          <span v-if="scope.row.nodeType == 'UNKNOW'" style="color: #0066ff">未知设备</span>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" />
      <el-table-column prop="nodeId" min-width="110" label="设备唯一标识码" />
      <el-table-column prop="name" label="设备名称" />
      <el-table-column prop="description" label="设备描述" />
      <el-table-column prop="manufacturerId" label="产品厂商 ID" min-width="100" />
      <el-table-column prop="manufacturerName" label="产品厂商名称" min-width="110" />
      <el-table-column prop="deviceType" label="设备类型" />
      <el-table-column prop="model" label="型号" />
      <el-table-column prop="protocolType" label="协议类型" />
      <el-table-column prop="status" label="设备状态">
        <template slot-scope="scope">
          <span v-if="scope.row.status == 'ONLINE'" style="color: #0066ff">在线</span>
          <span v-if="scope.row.status == 'OFFLINE'" style="color: red">离线</span>
          <span v-if="scope.row.status == 'INACTIVE'" style="color: red">未注册</span>
        </template>
      </el-table-column>
      <el-table-column prop="mute" label="设备是否冻结">
        <template slot-scope="scope">
          <span v-if="scope.row.mute == 'FALSE'" style="color: #0066ff">否</span>
          <span v-if="scope.row.mute == 'TRUE'" style="color: red">是</span>
        </template>
      </el-table-column>
    </el-table>
    <div style="text-align:right">
      <pagination style="padding:10px 16px" v-show="devicePagination.total>0" :limit.sync="devicePagination.pageSize" :page.sync="devicePagination.page" :total="devicePagination.total"
        @pagination="getDeviceList" />
    </div>
    <div>
      <el-button type="primary" size="small" @click="onSubmit">命令下发</el-button>
      <el-button size="small" @click="onCanle">取消</el-button>
    </div>
  </div>
</template>

<script>
import { getToken } from '@/utils/auth'
import * as api from '@/api/link/file'
import * as deviceApi from '@/api/link/device'
import * as dispatchApi from '@/api/link/dispatch'

export default {
  comments: {},
  props: {},
  data() {
    return {
      maxheight: (window.innerHeight - 320) / 2,
      TOfILE: ['CfgfileLoad', 'ShellScriptLoad', 'SoftwareLoad',"PatchLoad"],
      typeList: [
        // { value: 1, label: "获取设备信息" },
        // { value: 2, label: "系统文件下载" },
        // { value: 3, label: "系统文件下载状态查询" },
        { value: 'DeviceState', label: "获取设备信息" },
        { value: 'SoftwareLoad', label: "设备升级" },
        { value: "PatchLoad", label: "补丁升级" },
        { value: 'SoftwareLoadStatus', label: "系统文件下载状态查询" },
        { value: 'CfgfileLoad', label: "配置文件升级" },
        { value: 'CfgfileLoadStatus', label: "配置文件升级状态查询" },
        { value: 'SystemReboot', label: "重启设备" },
        { value: 'LogfileUpload', label: "设备日志收集" },
        { value: 'LogfileUploadNotify', label: "设备日志收集结果上报" },
        { value: 'LogfileUploadStatus', label: "设备日志收集状态查询" },
        { value: 'ShellScriptLoad', label: "应用升级" },
        { value: 'ShellScriptLoadNotify', label: "可执行文件执行结果上报" },
        { value: 'ShellScriptLoadStatus', label: "可执行文件执行状态查询" },
        { value: 'EthStatus', label: "网络接口信息查询" },
      ],
      typeOptions: [
        // 1 设备软件
        // 2 补丁
        // 3 初始化配置
        // 4 shell脚本
        // 5 组件公钥
        // 6 容器公钥
        // 7 应用公钥
        // 8 容器镜像包
        // 9 容器升级包
        // 10 应用文件
        // 11 终端升级包
        {
          value: '1',
          label: '设备软件'
        },
        {
          value: '2',
          label: '补丁'
        },
        {
          value: '3',
          label: '初始化配置'
        },
        {
          value: '4',
          label: 'shell脚本'
        },
        {
          value: '5',
          label: '组件公钥'
        },
        {
          value: '6',
          label: '容器公钥'
        },
        {
          value: '7',
          label: '应用公钥'
        },
        {
          value: '8',
          label: '容器镜像包'
        },
        {
          value: '9',
          label: '容器升级包'
        },
        {
          value: '10',
          label: '应用文件'
        },
        {
          value: '11',
          label: '终端升级包'
        }
      ],
      formInline: {
        type: 'CfgfileLoad'
      },
      searchForm: {},
      searchTime: [],
      multipleFile: [],
      multipleGroup: [],
      multipleDevice: [],
      fileTableData: [],//文件table
      groupTableData: [],//分组table
      deviceTableData: [],//设备table
      pagination: {
        total: 1,
        page: 1,
        pageSize: 10
      },
      groupPagination: {
        total: 1,
        page: 1,
        pageSize: 10
      },
      devicePagination: {
        total: 1,
        page: 1,
        pageSize: 10
      },
      activeName: 'second',
    }
  },
  computed: {
    maxHeight() {
      var curHeight =
        window.innerHeight ||
        document.documentElement.clientHeight ||
        document.body.clientHeight
      return curHeight - 280
    }
  },
  created() {
    this.getPageList()
    this.getProupPage()
    this.getDeviceList()
  },
  mounted() {
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
      // this.multipleGroup = []
      // this.multipleDevice = []
      this.$refs.groupTable.clearSelection();
      this.$refs.deviceTable.clearSelection();

    },
    // 获取分组
    getProupPage() {
      const p = Object.assign({}, this.pagination)
      deviceApi.groupPage(p).then(resp => {
        this.groupTableData = resp.data.list
        this.groupPagination = resp.data.pagination
        this.groupPagination.page = resp.data.pagination.current
      })
    },
    getDeviceList() {
      console.log(2324235, 'resp======>');
      const p = Object.assign({}, this.devicePagination, this.searchForm)
      deviceApi.page(p).then(resp => {
        this.deviceTableData = resp.data.list
        this.devicePagination = resp.data.pagination
        this.devicePagination.page = resp.data.pagination.current
      })
    },
    onChange(value) {
      this.$refs.deviceTable.clearSelection();
      if (this.TOfILE.indexOf(value) != -1) {
        // 文件
        // this.maxheight = 300
        this.maxheight = (window.innerHeight - 320) / 2
      } else {
        // this.maxheight = 600
        this.maxheight = window.innerHeight - 320
      }
    },
    onSubmit() {
      if (this.TOfILE.indexOf(this.formInline.type) != -1) {//有文件下载
        if (!this.multipleFile.length) {
          this.$message({
            message: '请选择文件！！！',
            type: 'error'
          });
          return
        }
      }
      var sendCommandDTO = null
      if (!this.multipleDevice.length) {
        this.$message({
          message: '请选择设备！！！',
          type: 'error'
        });
        return
      }
      sendCommandDTO = {
        iotDevices: [],
        type: this.formInline.type,
        fileIds: []
      }
      this.multipleFile.map(item => {
        sendCommandDTO.fileIds.push(item.id)
      })
      this.multipleDevice.map(item => {
        sendCommandDTO.iotDevices.push({ clientId: item.deviceId, nodeId: item.nodeId })
      })
      console.log(sendCommandDTO, 'sendCommandDTO=========>');
      dispatchApi.downRecordeSave(sendCommandDTO).then(resp => {
        if (resp.code == 200) {
          this.$message({
            message: '下发成功！！！',
            type: 'success'
          });
        } else {
          this.$message.error('下发失败！！！');
        }
      })
    },
    onCanle() {
      this.$router.push('/deviceList')
    },
    // 文件复选框事件
    fileSelectionChange(val) {
      this.multipleFile = val
    },
    // 分组复选框事件
    groupSelectionChange(val) {
      this.multipleGroup = val
    },
    // 设备复选框事件
    deviceSelectionChange(val) {
      this.multipleDevice = val
    },
    // 文件分页查询
    getPageList() {
      this.search()
    },
    // 分组分页查询
    getGroupList() {
    },
    search() {
      const p = Object.assign({}, this.pagination)
      api.page(p).then(resp => {
        this.fileTableData = resp.data.list
        this.pagination = resp.data.pagination
        this.pagination.page = resp.data.pagination.current
      })
    },
    deviceSearch() {
      const p = Object.assign({}, this.searchForm)
      if (this.searchTime.length > 0) {
        p.startTime = this.searchTime[0];
        p.endTime = this.searchTime[1];
      }

      deviceApi.page(p).then(resp => {
        this.deviceTableData = resp.data.list
        this.devicePagination = resp.data.pagination
        this.devicePagination.page = resp.data.pagination.current
      })
    },
  },
}
</script>

<style scoped lang="scss">
.orderIssued {
  padding: 20px;

  .curHeader {
    position: relative;
    height: 40px;
    .searcherBox {
      position: absolute;
      right: 0;
      top: 0;
    }
  }
}
</style>



<style lang="scss">
.orderIssued {
  .el-form-item--mini.el-form-item,
  .el-form-item--small.el-form-item {
    margin-bottom: 10px !important;
  }
}
</style>
